import React from 'react';
import { Table, Icon, Button, DatePicker, Row, Col, LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import Link from 'umi/link';
import router from 'umi/router';
import { connect } from 'dva';
import moment from 'moment';
import styles from '../index.less';

const { RangePicker } = DatePicker;

@connect(state => ({
  logs: state.logs,
}))
class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: [],
      visible: false,
    };
  }

  getList = (pageNum = 1, pageSize = 10) => {
    const { date } = this.state;
    this.props.dispatch({
      type: 'logs/getOperationList',
      payload: {
        pageNum,
        pageSize,
        startTime: date.length > 0 ? moment(date[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: date.length > 0 ? moment(date[1]).format('YYYY-MM-DD HH:mm:ss') : '',
      },
    });
  };

  /**
   * 日期变化
   */
  dateChange = date => {
    if (date.length === 0) {
      this.setState(
        {
          date: [],
          visible: false,
        },
        () => this.getList()
      );
    }
    this.setState({
      date,
    });
  };
  submit = () => {
    this.setState({
      visible: false,
    });
    this.getList();
  };

  pageChange = page => {
    this.getList(page);
  };

  componentDidMount() {
    this.getList();
  }

  render() {
    const {
      logs: { list, total, pageSize, pageNum, loading },
    } = this.props;
    const { visible } = this.state;

    const colomns = [
      {
        title: '操作时间',
        dataIndex: 'createDate',
        width: 150,
        filterDropdownVisible: visible,
        render: text => <span>{moment(text).format('YYYY年MM月DD日 HH:mm:ss')}</span>,
        onFilterDropdownVisibleChange: visible => this.setState({ visible }),
        filterDropdown: () => (
          <div className={styles.chooseWrap}>
            <LocaleProvider locale={zh_CN}>
              <RangePicker
                onChange={this.dateChange}
                onOk={this.submit}
                format="YYYY-MM-DD HH:mm:ss"
                showTime
                style={{ width: '100%' }}
              />
            </LocaleProvider>
          </div>
        ),
      },
      {
        title: '操作人',
        dataIndex: 'reserved1',
        width: 80,
      },
      {
        title: '接口地址',
        dataIndex: 'interfaceName',
        width: 150,
      },
      {
        title: '请求参数',
        dataIndex: 'record',
        width: 200,
      },
    ];

    const pagination = {
      onChange: this.pageChange,
      total,
      pageSize,
      current: pageNum,
    };

    return (
      <>
        <h3 className="head">操作日志</h3>
        <div style={{ padding: '10px 20px' }}>
          <Table
            style={{ position: 'relative' }}
            rowKey="id"
            loading={loading}
            style={{ marginBottom: '50px' }}
            pagination={pagination}
            columns={colomns}
            dataSource={list}
          />
        </div>
      </>
    );
  }
}

export default Pages;
